<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>头像修改</title>
<meta name="description" content="这是一个 user 页面">
<meta name="keywords" content="user">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="i/favicon1.png">
<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.min.css">
<link rel="stylesheet" href="css/cutPic.css">
</head>
<body>
	<!-- 接收session中的对象 -->
	<s:set name="username" value="#session['username']" />

	<header class="am-topbar am-topbar-inverse admin-header">
	<div class="am-topbar-brand">
		<s:a href="index">
			<strong>Wonderful Song</strong>
		</s:a>
		<small>用户信息管理</small>
	</div>

	<button
		class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
		data-am-collapse="{target: '#topbar-collapse'}">
		<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
	</button>

	<div class="am-collapse am-topbar-collapse" id="topbar-collapse">

		<ul
			class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
			<s:if test="#username != null">
				<li><a><img class="am-circle"
						src="${pageContext.servletContext.contextPath}/img/${username.image}"
						width="40" height="40" /> </a></li>
				<li><s:a href="admin_user?username=%{#username.username}">${username.username}</s:a>
				</li>
			</s:if>

			<li class="am-hide-sm-only"><s:a href="logout">
					<span class="am-icon-sign-out"></span>注销</s:a></li>
		</ul>
	</div>
	</header>




	<div class="am-cf admin-main">
		<!-- sidebar start -->
		<div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
			<div class="am-offcanvas-bar admin-offcanvas-bar">
				<ul class="am-list admin-sidebar-list">
					<li><s:a href="index">
							<span class="am-icon-home"></span> 首页</s:a></li>
					<li class="admin-parent"><a class="am-cf"
						data-am-collapse="{target: '#collapse-nav'}"> <span
							class="am-icon-file"></span> 信息管理 <span
							class="am-icon-angle-right am-fr am-margin-right"></span>
					</a>
						<ul class="am-list am-collapse admin-sidebar-sub am-in"
							id="collapse-nav">
							<li><s:a href="admin_user?username=%{#username.username}"
									class="am-cf">
									<span class="am-icon-check"></span> 个人资料
                    <span
										class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span>
								</s:a></li>

						</ul></li>

					<li class="admin-parent"><a class="am-cf"
						data-am-collapse="{target: '#collapse-nav-list'}"> <span
							class="am-icon-file"></span> 歌单列表 <span
							class="am-icon-angle-right am-fr am-margin-right"></span>
					</a>

						<ul class="am-list am-collapse admin-sidebar-sub am-in"
							id="collapse-nav-list">
							<li><s:a class="am-cf"
									href="my_order?username=%{#username.username}&image=%{#username.image}">
									<span class="am-icon-check"></span> 显示歌单
                    <span
										class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span>
								</s:a></li>

						</ul></li>

				</ul>

			</div>
		</div>
		<!-- sidebar end -->

		<!-- content start -->
		<!-- 接收并显示被修改用户的头像 -->
		<s:set name="u_img" value="#session['img_getValue']" />
		<s:set name="upload_ok" value="#session['upload_ok']" />
		<div class="admin-content">
			<div class="admin-content-body">

				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg"> 修改 <s:property
								value="#u_img.username" /> 的头像
						</strong> / <small>Modify avatar</small>
					</div>
				</div>
				<hr />

				<!-- 已经上传了新头像 -->
				<div class="am-g">
					<div class="am-u-sm-12 am-u-md-4">
						<s:fielderror cssClass="am-msg am-btn-warning"></s:fielderror>
						<s:if test="#upload_ok != null">
							<img
								src="${pageContext.servletContext.contextPath}/img/${upload_ok.image}"
								width="400px" id="target">
							<div id="preview-pane">
								<div class="preview-container">
									<img width="250px" class="jcrop-preview"
										src="${pageContext.servletContext.contextPath}/img/${upload_ok.image}">
								</div>
							</div>
						</s:if>
						<!-- 还未上传新头像，显示旧头像 -->
						<s:else>
							<img
								src="${pageContext.servletContext.contextPath}/img/${u_img.image}"
								width="400px">
						</s:else>

						<!-- 上传新头像 -->
						<s:form
							action="img_alert?username=%{#username.username}&id=%{#u_img.id}"
							method="post" enctype="multipart/form-data" theme="simple">
							<s:file id="file" name="upload" cssClass="am-btn am-btn-default" />
							<s:submit value="上传查看效果" cssClass="am-btn am-btn-success" />
						</s:form>


						<s:form method="post" theme="simple"
							action="update_logo?username=%{#username.username}&name_img=%{#upload_ok.image}">
							<s:hidden name="user.x" id="x" />
							<s:hidden name="user.y" id="y" />
							<s:hidden name="user.width" id="width" />
							<s:hidden name="user.height" id="height" />
							<s:submit value="确认修改" cssClass="am-btn am-btn-primary" />
						</s:form>



					</div>

				</div>






			</div>

			<footer class="admin-content-footer">
			<hr>
			<p class="am-padding-left">© 2019 Wonderful Song 王骏 毕业设计作品
				15软件G1班 2015330117</p>
			</footer>

		</div>

		<!-- content end -->

	</div>

	<script src="js/jquery.min.js"></script>

	<script src="js/amazeui.min.js"></script>

	<script src="js/app.js"></script>

	<script src="js/jquery.Jcrop.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
			var true_width = document.getElementById("target").naturalWidth;
			var true_height = document.getElementById("target").naturalHeight;
			var that = true_width / true_height;
			var hei = 400 / that;
			var jcrop_api, boundx, boundy, x, y, width, height, $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'), xsize = $pcnt
					.width(), ysize = $pcnt.height();
			console.log('init', [ xsize, ysize ]);
			$('#target').Jcrop({
				onChange : updatePreview,
				onSelect : updatePreview,
				aspectRatio : xsize / ysize
			}, function() {
				var bounds = this.getBounds();
				boundx = bounds[0];
				boundy = bounds[1];
				jcrop_api = this;
				$preview.appendTo(jcrop_api.ui.holder);
			});
			function updatePreview(c) {
				if (parseInt(c.w) > 0) {
					var rx = xsize / c.w;
					var ry = ysize / c.h;
					$pimg.css({
						width : Math.round(rx * boundx) + 'px',
						height : Math.round(ry * boundy) + 'px',
						marginLeft : '-' + Math.round(rx * c.x) + 'px',
						marginTop : '-' + Math.round(ry * c.y) + 'px'
					});
					var one = true_width * c.w / 400;
					var two = true_height * c.h / hei;
					var three = true_width * c.x / 400;
					var four = true_height * c.y / hei;

					$('#width').val(one); //c.w 裁剪区域的宽  
					$('#height').val(two); //c.h 裁剪区域的高  
					$('#x').val(three); //c.x 裁剪区域左上角顶点相对于图片左上角顶点的x坐标  
					$('#y').val(four); //c.y 裁剪区域顶点的y坐标

				}
			}
			;
		});
	</script>
</body>

</html>